html,
body,
#app {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.elevation {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.elevation0 {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.elevation1 {
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.elevation2 {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.elevation3 {
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.elevation4 {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.elevation5 {
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.elevation6 {
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.elevation7 {
    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}

.elevation8 {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.elevation9 {
    box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}

.elevation10 {
    box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

.elevation11 {
    box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}

.elevation12 {
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.elevation13 {
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.elevation14 {
    box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}

.elevation15 {
    box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}

.elevation16 {
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.elevation17 {
    box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}

.elevation18 {
    box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}

.elevation19 {
    box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}

.elevation20 {
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}

.elevation21 {
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}

.elevation22 {
    box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}

.elevation23 {
    box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}

.elevation24 {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

/* font */
.fontcwhite {
    color: white;
}

.fontcred {
    color: #ff4240;
}

.fontcyellow {
    color: #e0ed6a;
}

.fontsd8 {
    font-size: 0.8rem;
}

.fonts1 {
    font-size: 1rem;
}

.fonts24 {
    font-size: 24px;
}

.fonts1d5 {
    font-size: 1.5rem;
}

.bgcwhite {
    background-color: white;
}

.bgcred {
    background-color: #ff2b2a;
}

.bgcgreen {
    background-color: #40ba93;
}

.bgcgreen2 {
    background-color: #f4fdea;
}

.bgcyellow {
    background-color: #ffad2b;
}

.bgcblue {
    background-color: #d3f6fa;
}

.float {
    &-left {
        float: left;
    }

    &-right {
        float: right;
    }
}

.height160 {
    height: 160px;
}

.heighti160 {
    min-height: 160px;
}

.height100p {
    height: 100%;
}

.padding2 {
    padding: 2px;
}

.padding2d4 {
    padding: 2px 4px;
}

.padding10 {
    padding: 10px;
}

.padding1015 {
    padding: 10px 15px;
}

.padding1020 {
    padding: 10px 20px;
}

/* positions */
.left1rem {
    margin-left: 1rem;
}

.leftd5rem {
    margin-left: 0.5rem;
}

.right1rem {
    margin-right: 1rem;
}

.rightd5rem {
    margin-right: 0.5rem;
}

/* border */

.borderr2 {
    border-radius: 4px;

}

.borderr4 {
    border-radius: 4px;
}

.coursor {
    &:hover {
        cursor: pointer;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 5s linear;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

/* transition animation */
.list-item {
    display: inline-block;
    margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
    transition: all 1s;
}

.list-enter,
.list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

.scrollbar {
    overflow: auto;
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.flex-vertical {
    display: flex;
    flex-flow: column nowrap;
}

.flex-horizon {
    display: flex;
    flex-flow: row nowrap;
}

.align-items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

/* Utils
------------------------------ */
[v-cloak] {
    display: none;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.fr {
    float: right !important;
}

.fl {
    float: left !important;
}

.fi {
    float: initial !important;
}

.m-auto {
    margin: auto !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.w-percent-100 {
    width: 100% !important;
}

.base-line-height {
    line-height: @base--line-height !important;
}

/* @for $i from 1 through 10 {
    .flex#{$i} {
        flex: $i;
    }
} */

.getFlex(@count )when(@count > 0) {
    .flex@{count} {
        flex: (@count);
    }

    .getFlex((@count - 1));
}

.getFlex(10);

.margin10px {
    margin: 10px;
}

.fade {
    &-enter-active {
        transition: all .5s .5s ease-in-out;
        opacity: 0;
    }

    &-leave-active {
        transition: all .5s ease-in-out;
    }

    &-enter,
    &-leave-to {
        opacity: 0;
    }

    &-enter-to,
    &-leave {
        opacity: 1;
    }
}